<script setup>
import { ref, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import router from '@/router'
import {} from '@/api/data'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/legend'
import { getWeekTime, getMW } from '@/utils'
// 定义loading
const isLoading = ref(false)
const bannerFlag = ref(true) //banner 标志
const images = ref([
  'https://img.yzcdn.cn/vant/apple-1.jpg',
  'https://img.yzcdn.cn/vant/apple-2.jpg',
  'https://img.yzcdn.cn/vant/apple-3.jpg',
  'https://img.yzcdn.cn/vant/apple-4.jpg'
])

// 跳转防伪
const toSecurity = async () => {
  console.log(111)
  router.push(`/Security`)
}
// 查看更多
const toMore = async () => {
  console.log(22)
  router.push(`/More`)
}
</script>

<template>
  <div class="swiper-box" v-if="bannerFlag">
    <van-swipe :autoplay="3000" :height="240">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" style="width: 100%; height: 100%" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="product-box">
    <p>产品信息</p>
    <van-cell-group>
      <van-cell title="追溯网址：" value="trace.qiaochang.com" />
      <van-cell title="单位识别代码：" value="11616061200000000913413979131194" />
      <van-cell title="登记证号：" value="PD20161606" />
      <van-cell title="生产批次：" value="见外包装" />
      <van-cell title="产品商标：" value="给力锄" />
      <van-cell title="产品名称：" value="51%2甲·草甘膦水剂" />
      <van-cell title="包材材质：" value="PE" />
      <van-cell title="持证单位：" value="侨昌现代农业有限公司" />
      <van-cell title="生产日期：" value="请查看产品喷印日期" />
      <van-cell title="产品规格：" value="选择会有" />
      <van-cell title="产品剂型：" value="选择才会有" />
      <van-cell title="生产企业：" value="后台选择会有" />
      <van-cell title="质量检验：" value="">
        <template #value>
          <van-tag type="success" single class="margin-left12">合格</van-tag>
          <van-tag type="danger" single class="margin-left12">不合格</van-tag>
        </template>
      </van-cell>
      <van-cell title="产品详情：" value="产品链接" is-link to="/product">
        <template #value>
          <span style="color: blue">产品链接</span>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
  <div class="btn-box">
    <van-row>
      <van-col span="12">
        <van-button type="primary" size="middle" style="width: 80%" @click="toSecurity"
          >防伪查询</van-button
        >
      </van-col>
      <van-col span="12">
        <van-button type="primary" size="middle" style="width: 80%" @click="toMore"
          >查看更多</van-button
        >
      </van-col>
    </van-row>
  </div>
</template>

<style scoped>
.product-box {
  margin: 20px 10px;
}
.product-box p {
  font-size: 20px;
}
.van-cell {
  padding: 0;
}
.product-box :deep() .van-cell__title,
.product-box :deep() .van-cell__value {
  flex: none;
  color: #000;
}
.product-box :deep() .van-cell__title {
  width: 25%;
  text-align: right;
}
.product-box :deep() .van-icon-arrow:before {
  display: none;
}
.btn-box {
  text-align: center;
  margin-top: 30px;
}
</style>